<template>
  <div>
    <AddEditNote
      v-model="note"
    >
      <button
        class="button is-link has-background-success"
        @click="handleButtonClick"
        :disabled="note === ''"
      >
        添加事项
      </button>
    </AddEditNote>
    <Note v-for="note in notes" :note="note" />
  </div>
</template>

<script>
import Note from '@/components/Notes/Note.vue'
import AddEditNote from '@/components/Notes/AddEditNote.vue'
import { mapState, mapMutations } from 'vuex'
export default {
  components: {
    Note,
    AddEditNote
  },

  data() {
    return {
      note: ''
    }
  },

  computed: {
    ...mapState(['notes'])
  },

  methods: {
    ...mapMutations(['addNote']),
    handleButtonClick() {
      this.addNote(this.note)
      this.note = ''
    }
  }
}
</script>